<template>
  <view class="page_root" data-page-name="绩效分析" data-page-identification="w_6xfhnodgyt">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_z1bj9ul1fl 自定义模板_94ythjwzpt -->
    <view class="custom-tabs">
      <view class="custom-tab" :class="{ active: state.current === 0 }" @click="tabChange(0)">
        {{ tabList[0].name }}
        <span v-if="state.current === 0" class="custom-tab-underline"></span>

      </view>
      <view class="border-middle"></view>
      <view class="custom-tab" :class="{ active: state.current === 1 }" @click="tabChange(1)">
        {{ tabList[1].name }}
        <span v-if="state.current === 1" class="custom-tab-underline"></span>
      </view>
    </view>
    <view class="main-left" v-if="state.tabFlag">
      <view class="bgc-img"></view>
      <view class="top-message">
        <view class="top-left">
          <view class="project-score"><view class="score-title">上月项目绩效平均分数</view> <span class="score-num">95分</span></view>
          <view class="people-score"><view class="score-title">上月员工绩效平均分数</view> <span class="score-num">89分</span></view>
          <view class="workHour-score"><view class="score-title">上月员工工时分平均分数</view> <span class="score-num">96分</span></view>
        </view>
        <view class="top-right"></view>
      </view>
      <view class="budget-title">
        <view class="title-icon"></view>
        <view class="budget-title-font"> 各项目上月绩效分数排行 </view>
      </view>
      <view class="budget-content">
      </view>
    </view>
    <!-- end vid_z1bj9ul1fl 自定义模板_94ythjwzpt -->
  </view>
</template>
<script setup>

import {
  ref, reactive, toRaw, markRaw,
  watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, getCurrentInstance
} from "vue";
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
import { FormFormat } from '@/utils/formFormat'
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
import hashSum from 'hash-sum';
/*** UNI_APP_EXEGESIS ***
import { handleRedirect, permission, parseJson } from '@/utils/common';
import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
import { BroadcastMessage } from '@/utils/BroadcastMessage';
import { sendToken } from "@/hooks/useIframeToken";
*** UNI_APP_EXEGESIS ***/


// ---------------------------- 属性定义 ----------------------------
const sourceId = "page3000000289"

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => { };

let isProcessState = ref(false);


const setTimeOutList = [];


const vid_z1bj9ul1fl_props = reactive({
  code: "",
});



// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_94ythjwzpt ref 的引用
const vid_z1bj9ul1fl_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_z1bj9ul1fl_ref };

const showState = reactive({
  vid_z1bj9ul1fl_visible: true,
})
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------


// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------


// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_1gs6eidq7j = (...params) => {
  uni.navigateBack()
}

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  'processInstanceId': undefined,
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------


// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
/*** UNI_APP_EXEGESIS ***
    // 获取上一层传递的数据
    const workflowChannel = new BroadcastMessage('WORKFLOW');
    workflowChannel.publish({ status: 'Ready' });
    workflowChannel.subscribe((data) => {
      if (data) {
        isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
      }
    });
    *** UNI_APP_EXEGESIS ***/


const pageScrollTop = ref(0)

// *** PREVIEW_EXEGESIS ***
onMounted(() => {
  setPageParams(route.query)
  // 设置表单的rule
  try {

  } catch {
    // do nothing
  }
});
// *** PREVIEW_EXEGESIS *** //

/*** UNI_APP_EXEGESIS ***
const routeOption = ref({})
onLoad((option) => {
  routeOption.value = option;
});
onReady(() => {
  setPageParams(routeOption.value)
  // 设置表单的rule
  try{
 
  }catch{
      // do nothing
  }
});
// 图表刷新标记
const uChartsReshowFlag = ref(false);
onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
    uChartsReshowFlag.value = false
})
onShow(() => {
    uChartsReshowFlag.value = true; // 页面激活后,标记置为true
 
    setPageParams(routeOption.value)
})
onPageScroll(e => {
    pageScrollTop.value = e.scrollTop
});
*** UNI_APP_EXEGESIS ***/

const setPageParams = (routerParam) => {
  const pageParams = [{ "dataType": "STRING", "dependencies": [], "name": "processInstanceId" }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') { // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name])
  });


}

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});


/*** UNI_APP_EXEGESIS ***
onPullDownRefresh(() => {
  // 下拉刷新
  setTimeout(() => {
      uni.stopPullDownRefresh()
  }, 1000)
})
*** UNI_APP_EXEGESIS ***/

// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================


// ================================定制化逻辑========================================
const state = reactive({
  tabFlag: true,
  current: 0,
})
const tabList = [
  {
    name: '图表分析',
  },
  {
    name: '项目列表',
  },
];
function tabChange(index) {
  console.log(index, 'asdasdsad');
  state.current = index;
  if (index === 0) {
    state.tabFlag = true;
  } else {
    state.tabFlag = false;
  }
}
</script>
<style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
}

.custom-tabs {
  background-color: #3673C9;
  display: flex;
  position: relative;
}

.custom-tab {
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  background-color: transparent;
  position: relative;
  color: #ffffff;
  font-size: 16px;
  transition: border-color 0.6s;
  text-align: center;
  height: 50px;
  line-height: 20px;
}

.border-middle {
  width: 1px;
  height: 23px;
  position: absolute;
  border: 1px solid #729FD8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.custom-tab.active {
  background-color: transparent;

  font-size: 16px;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  font-weight: 600;
}

.main-left {
  height: calc(100vh - 90px);
  background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
  padding: 15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: relative;
  overflow: auto;
  top: -15px;
}

.bgc-img {
  position: absolute;
  width: 100%;
  height: 300px;
  left: 0;
  top: -180px;
  background-image: url('http://10.40.0.33:9001/file-storage/416680575854426112.png');
  background-size: cover;
}

.top-message {
  height: 120px;
  width: 100%;
  background-image: url('http://10.40.0.33:9001/file-storage/420154963658520576.png');
  background-size: cover;
  position: relative;
  padding: 15px;
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}

.top-left {
  width: 75%;
  padding-left:20px ;
}

.top-right {
  flex: 1;
}

.score-num {
  text-align: right;
  font: 18px / 20px impact, simhei;
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-indent: 0px;
  margin: 0px;
}

.project-score,
.people-score,
.workHour-score {
  text-align: left;
  font: 14px / 20px arial, helvetica, "microsoft yahei";
  color: rgb(255, 255, 255);
  letter-spacing: 0px;
  text-indent: 0px;
  margin: 0px;
  display: flex;
}
.score-title{
width: 80%;
}
.people-score,.workHour-score{
  margin-top: 16px;
}
.project-score{
  margin-top: 8px;
}
.budget-title {
  height: 80px;
  background-image: linear-gradient(270deg, rgba(0, 121, 255, 0.00) 0%, #0079FF 100%);
  border-radius: 6px;
  padding: 8px 15px;
  display: flex;
  position: relative;
  background-size: cover;
}
.budget-title-font {
  font-size: 16px;
  color: #FFFFFF;
  text-shadow: 0 4px 20px #0063A4;
  font-weight: 600;
  margin-left: 8px;
}


.budget-content {
  min-height: 338px;
  width: 100%;
  border: 1px solid #fff;
  position: relative;
  top: -40px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(255, 255, 255, 0.80) 100%);
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 4px 10px 0 #CFE7FF;
  border-radius: 6px;
  backdrop-filter: blur(5px);
  border: 1px solid #fff;
  padding: 12px 15px;
  line-height: 1.8;
  /* 添加模糊效果，可以调整模糊半径 */
}
.title-icon {
  position: relative;
  top: 3px;
  height: 18px;
  width: 15px;
  background-image: url('http://10.40.0.33:9001/file-storage/416539678170920960.png');
  background-size: cover;
}
</style>
  